<template>
  <div>
    <div class="filter-container">
      <a-form layout="inline">
        <a-form-item label="统计周期">
          <a-select v-model="timeRange" >
            <a-select-option value="month">按月统计</a-select-option>
            <a-select-option value="week">按周统计</a-select-option>
            <a-select-option value="year">按年统计</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="院系">
          <a-select v-model="department" style="width: 150px" allowClear>
            <a-select-option value="all">全部院系</a-select-option>
            <a-select-option v-for="dept in departments" :key="dept" :value="dept">
              {{ dept }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </div>

    <div class="chart-container">
      <a-row :gutter="16">
        <a-col :span="24">
          <h3>调课趋势分析</h3>
          <line-chart :data="trendData" :height="300" />
        </a-col>
      </a-row>
    </div>

    <div class="chart-container">
      <a-row :gutter="16">
        <a-col :span="12">
          <h3>调课原因分布</h3>
          <pie-chart :data="reasonData" :height="300" />
        </a-col>
        <a-col :span="12">
          <h3>调课类型分布</h3>
          <pie-chart :data="typeData" :height="300" />
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import LineChart from '@/components/Charts/ChartLine.vue'
import PieChart from '@/components/Charts/ChartPie.vue'   // 假设PieChart.vue是文档2的组件

export default {
  components: {
    LineChart,
    PieChart
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      timeRange: 'month',
      department: 'all',
      departments: ['信息工程系', '机电工程系', '建筑工程系', '外语学院']
    }
  },
  computed: {
    trendData() {
      return {
        labels: this.data.map(item => item.month),
        datasets: [
          {
            label: '调课次数',
            borderColor: '#1890ff',
            backgroundColor: 'rgba(24, 144, 255, 0.1)',
            data: this.data.map(item => item.adjustCount),
            fill: true
          }
        ]
      }
    },
    reasonData() {
      return {
        labels: ['教师原因', '学校原因', '学生原因', '其他'],
        datasets: [
          {
            backgroundColor: ['#1890ff', '#52c41a', '#faad14', '#f5222d'],
            data: [45, 30, 15, 10]
          }
        ]
      }
    },
    typeData() {
      return {
        labels: ['调课', '停课', '补课'],
        datasets: [
          {
            backgroundColor: ['#1890ff', '#52c41a', '#faad14'],
            data: [60, 25, 15]
          }
        ]
      }
    }
  }
}
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}
.chart-container {
  margin-bottom: 24px;
}
</style>